<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<style type="text/css">
		.layui-elem-field {
			border-color: black !important;
		}
	</style>
	<link href="css/mui.min.css" rel="stylesheet" />
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
		mui.init();
	</script>
	<script type="text/javascript" src="js/vue.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="js/layui/dist/css/layui.css">
	<script type="text/javascript" src="js/layui/dist/layui.js" charset="utf-8"></script>
	<script src="js/words.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="form">
		<fieldset class="layui-elem-field">
			<legend>
				GPT接收
				<button type="button" 
					class="layui-btn layui-btn-xs layui-btn-normal"
					v-on:click="recv_gpt">接收新句子</button>
			</legend>
			<div class="layui-field-box" v-html="gpt"></div>
		</fieldset>
		<fieldset class="layui-elem-field">
			<legend>
				答案
				<button type="button" 
					class="layui-btn layui-btn-xs layui-btn-normal" 
					v-on:click="show_answer = !show_answer">切换显示</button>
			</legend>
			<div class="layui-field-box">
				<div v-if="show_answer">{{ english_answer }}</div>
				<div v-if="show_answer">{{ chinese_answer }}</div>
			</div>
		</fieldset>
		<div class="layui-form-item">
			<label class="layui-form-label">英文</label>
			<div class="layui-input-block">
				<input type="text" v-model="en_input" placeholder="请输入" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">中文</label>
			<div class="layui-input-block">
				<input type="text" v-model="cn_input" placeholder="请输入" class="layui-input">
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var id = parseInt(location.href.split('?id=')[1]);
		var word_list_length = word_list[id].length;
		var rand_num = 0;
		const change_content = function (p) {
			if (word_list_length === 0) {
				return;
			}
			rand_num = Math.round(Math.random() * word_list_length);
			p.en_input = '';
			p.cn_input = '';
			console.log(word_list[id][rand_num]);
			const c = word_list[id][rand_num]['c'];
			const e = word_list[id][rand_num]['e'];
			console.log(c, e);
			p.english_word = e;
			p.chinese_word = c;
		};
		
		var practice = new Vue({
			el: '#form',
			data: {
				gpt: '',
				show_answer: false,
				english_answer: '',
				chinese_answer: '',
				english_word: '',
				chinese_word: '',
				en_input: '',
				cn_input: '',
				show_english: true,
				show_chinese: true,
				en_input_true: false,
				cn_input_true: false
			},
			created: function () {
				change_content(this);
				this.recv_gpt_func(this);
			},
			watch: {
				en_input: function (text) {
					if (text === this.english_answer && text !== '') {
						this.en_input_true = true;
					} else {
						this.en_input_true = false;
					}
					if (this.en_input_true && this.cn_input_true) {
						change_content(this);
						this.recv_gpt_func();
						this.en_input_true = false;
						this.cn_input_true = false;
					}
				},
				cn_input: function (text) {
					if (text === this.chinese_answer && text !== '') {
						this.cn_input_true = true;
					} else {
						this.cn_input_true = false;
					}
					if (this.en_input_true && this.cn_input_true) {
						change_content(this);
						this.recv_gpt_func();
						this.en_input_true = false;
						this.cn_input_true = false;
					}
				}
			},
			methods: {
				recv_gpt: function () {
					this.recv_gpt_func();
				},
				recv_gpt_func: async function () {
					var res = await fetch('https://aiapi.xing-yun.cn/v1/chat/completions', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
							'Accept': 'application/json',
							'Authorization': '星芸API的key'
						},
						body: JSON.stringify({
							"model": "gpt-3.5-turbo",
							"messages": [
								{
								  "role": "user",
								  "content": "用“" + this.english_word + "”造句，给出句子的中英文，中文以“c:”开头，英文以“e:”开头，用换行分隔。并给出句子所使用的所有单词和词组的中英文及相关语法，不需要任何解释。其中句子、单词、词组的中英文之间用换行分隔，语法单独一行，语法全部用中文解释"
								}
							],
							"stream": true
						})
					});
					var reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
					var is_done = false;
					this.gpt = '';
					this.english_answer = '';
					this.chinese_answer = '';
					var gpt_ret = '';
					while (true) {
						var { value, done } = await reader.read();
						if (done) {
							break;
						}
						value = value.split('data: ').join('');
						var value_list = value.split('\n');
						for (var i in value_list) {
							if (value_list[i] !== '') {
								if (value_list[i] === '[DONE]') {
									is_done = true;
									break;
								}
								var v = JSON.parse(value_list[i]);
								var text = v['choices'][0]['delta']['content'];
								if (typeof text !== 'string') {
									continue;
								}
								gpt_ret += text;
								this.gpt += text.split('\n').join('<br>');
							}
						}
						if (is_done) {
							break;
						}
					}
					console.log(gpt_ret);
					var ret_list = gpt_ret.split('\n');
					var is_c = false, is_e = false;
					var c = '', e = '';
					for (var i in ret_list) {
						var v = ret_list[i];
						if (v.indexOf('c:') === 0 && !is_c) {
							v = v.replace('c:', '').trim();
							c = v;
							is_c = true;
						} else if (v.indexOf('e:') === 0 && !is_e) {
							v = v.replace('e:', '').trim();
							e = v;
							is_e = true;
						}
					}
					this.english_answer = e;
					this.chinese_answer = c;
				}
			},
		});
	</script>
</body>
</html>